<!-- 系统账号 -->
<template>
  <div class="full-container">
    <page-main :white-bg="false" class="h100 flex-column">
      <div class="flex-row align-start">
        <SearchBarV2
          v-model:fields="searchForm"
          :form-schema="formItems"
          @search="search"
        />
        <div class="btn-wrapper">
          <el-button type="primary" :disabled="!multipleSelection.length" @click="exportFn">
            <el-icon class="icon"><Download /></el-icon>导出
          </el-button>
          <el-button type="primary" :disabled="!multipleSelection.length" @click="batchResetFn">
            <el-icon size="12px" class="icon">
              <svg-icon name="icon-chongzhi" />
            </el-icon>重置
          </el-button>
          <el-button type="primary" :disabled="!multipleSelection.length" @click="batchAllowCancelFn">
            <el-icon class="icon"><CircleClose /></el-icon>允许作废
          </el-button>
        </div>
      </div>
      <SchemaTable
        ref="schemaTableRef"
        :columns="columns"
        :data="loadData"
        :style="{width:'100%'}"
        row-key="emsClassId"
        :row-selection="selectQuestion"
      >
        <!-- 合同编号 -->
        <template #contractCode="scope">
          <span v-if="scope.row.contractStatus === '未开放'">合同尚未开放签订</span>
          <span v-else-if="scope.row.contractStatus === '待签订'" class="contract-code" @click="showContractViewTemplateUrl">{{ isShowContractViewTemplateUrl ? scope.row.contractCode : '点击查看预览合同模板' }}</span>
          <a v-else class="contract-code" @click="viewContract">{{ scope.row.contractCode }}</a>
        </template>
        <!-- 定位 -->
        <template #locationFlag="scope">
          <el-switch v-model="scope.row.locationFlag" active-value="true" inactive-value="false" @change="switchFn(scope.row)" />
        </template>
        <!-- 操作 -->
        <template #action="scope">
          <el-button v-if="resetFnCom(scope.row.contractStatus)" :style="{marginLeft: '10px'}" type="primary" text @click.stop="resetFn(scope.row)">重置</el-button>
          <el-button v-if="openSignFnCom(scope.row.contractStatus)" :style="{marginLeft: '10px'}" type="primary" text @click.stop="openSignFn(scope.row)">开放签订</el-button>
          <el-button v-if="closeSignFnCom(scope.row.contractStatus)" :style="{marginLeft: '10px'}" type="primary" text @click.stop="closeSignFn(scope.row)">关闭签订</el-button>
          <el-button v-if="allowCancelFnCom(scope.row.contractStatus)" :style="{marginLeft: '10px'}" type="primary" text @click.stop="allowCancelFn(scope.row)">允许作废</el-button>
          <el-button v-if="canCancelFnCom(scope.row.contractStatus)" :style="{marginLeft: '10px'}" type="primary" text @click.stop="canCancelFn(scope.row)">取消作废</el-button>
          <el-button v-if="offlineCancelFnCom(scope.row.contractStatus)" :style="{marginLeft: '10px'}" type="primary" text @click.stop="offlineCancelFn(scope.row)">线下作废</el-button>
        </template>
      </SchemaTable>
      <div class="page-wrap">
        <el-pagination
          v-model:currentPage="searchForm.pageIndex"
          v-model:page-size="searchForm.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          background
          layout="total, sizes, prev, pager, next"
          @current-change="search"
          @size-change="handleSizeChange"
        />
      </div>
      <!-- 批量导出-->
      <BatchExportDialog
        ref="batchExportDialogRef"
      />
      <!-- 批量重置 -->
      <BatchResetDialog
        ref="batchResetDialogRef"
      />
      <!-- 批量允许作废 -->
      <BatchAllowCancelDialog
        ref="batchAllowCancelDialogRef"
      />
      <!-- 重置 -->
      <ResetDialog
        ref="resetDialogRef"
      />
      <!-- 允许作废 -->
      <AllowCancelDialog
        ref="allowCancelDialogRef"
      />
      <!-- 添加、编辑 -->
      <OpenSignDialog
        ref="openSignDialogRef"
      />
      <!-- 定位白名单 -->
      <LocationFlagDialog
        ref="locationFlagDialog"
      />
    </page-main>
  </div>
</template>

<script>
import useList from './composition/useList'
import useOperation from './composition/useOperation'
import OpenSignDialog from './components/openSignDialog.vue'
import BatchExportDialog from './components/batchExportDialog.vue'
import BatchResetDialog from './components/batchResetDialog.vue'
import BatchAllowCancelDialog from './components/batchAllowCancelDialog.vue'
import ResetDialog from './components/batchResetDialog.vue'
import AllowCancelDialog from './components/batchAllowCancelDialog.vue'
import LocationFlagDialog from './components/locationFlagDialog.vue'

export default {
  components: { OpenSignDialog, BatchExportDialog, BatchResetDialog, BatchAllowCancelDialog, ResetDialog, AllowCancelDialog, LocationFlagDialog },
  setup() {
    return {
      ...useList(), // 初始化渲染，条件搜索，表格渲染，分页
      ...useOperation() // 搜索表格页按钮、操作
    }
  }
}

</script>

<style scoped lang="scss">
.page-wrap {
  padding: 10px 10px 10px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #fff;
  border-radius: 4px;
}
.list-wrap {
  flex: 1;
  overflow: auto;
  height: 100%;
}
li::marker {
  color: #47d4c9;
}
.color::marker {
  color: #e86969;
}
.contract-code {
  cursor: pointer;
  color: #247ffc;
}
</style>

